<template>
<!-- 面试技巧 -->
  <div class="interview-skills">
     <SearchBox :formInlineMsg='formInline' @formInline='formInlinefn' @SearchMsg='handleSearch' :articledialogVisibleMsg='articledialogVisible' @articledialogVisible_a='handleClose' :search_title='search_title'>
       <template #left>
             <el-input v-model.trim="formInline.title" placeholder="根据文章标题搜索"></el-input>
       </template>
       <template #right>
             <el-select v-model="formInline.use" placeholder="请选择">
               <el-option label="启用" value="1"></el-option>
               <el-option label="禁用" value="0"></el-option>
             </el-select>
       </template>
     </SearchBox>
     <DataBar :DataNum='DataNum'></DataBar>
    <div class="hm-mm-list" style="width: 100%">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="index" label="序号" width="100">
          <template #default='{$index}'>
            {{($index+1)}}
          </template>
        </el-table-column>
        <el-table-column prop="title" label="文章标题" width="480">
          <template #default='{row}'>
            {{row.title}}
            <span class="el-icon-film" v-show='row.videoURLShow' style="color: #00f;cursor: pointer;font-size: 18px;" @click='videoShow(row)'></span>
          </template>
        </el-table-column>
        <el-table-column prop="visits" label="阅读数" width=""></el-table-column>
        <el-table-column prop="username" label="录入人" width=""></el-table-column>
        <el-table-column prop="createTime" label="录入时间" width="">
            <template #default="{row}">
              {{row.createTime.replace(/T/g,' ').replace(/.000Z/g,'')}}
            </template>
        </el-table-column>
        <el-table-column prop="state" label="状态" width="">
            <template #default="{row}">
              {{row.state===1?'已启用':'已禁用'}}
            </template>
        </el-table-column>
        <el-table-column label="操作" width="">
          <template #default="{row}">
           <el-button type="text" @click="preview(row)">预览</el-button>
           <el-button type="text" @click="enable(row.id,row.state)">{{row.state===1?'启用':'禁用'}}</el-button>
           <el-button type="text" @click="recompose(row)" :disabled='row.state===1?true:false'>修改</el-button>
           <el-button type="text" @click="del(row)" :disabled='row.state===1?true:false'>删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination background layout="prev, pager, next, sizes, jumper" :total="totalPages" :page-sizes="[5, 10, 20, 50]" style="float: right;margin-right: 10px;margin-top: 20px;"
      @current-change="handleCurrentChange" @size-change="handleSizeChange"></el-pagination>
    </div>
    <!-- 文章对话框 -->
    <el-dialog :title="title" :visible.sync="articledialogVisible" width="800px" @close='dialogclose'>
      <el-form :model="formData" status-icon :rules="rules" ref="formData" label-width="100px" class="demo-ruleForm">
        <el-form-item label="文章标题" prop="title">
          <el-input type="text" v-model="formData.title" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="文章内容" prop="articleBody">
          <quillEditor v-model="formData.articleBody" :options="editorOption" style="height:200px;margin-bottom:50px"></quillEditor>
        </el-form-item>
        <el-form-item label="视频地址">
          <el-input v-model.trim="formData.videoURL" placeholder="请输入视频地址"></el-input>
        </el-form-item>
        <el-form-item class="dialog-footer">
          <el-button @click="articledialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="confirm">确 定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!-- 预览对话框 -->
    <el-dialog title="预览文章" :visible.sync="previewDialogVisible" width="800px">
      <div class="top"><h2>{{previewData.title}}</h2></div>
      <div class="middle">
        <ul style="display: flex;margin:15px 0;">
          <li>&nbsp;&nbsp;&nbsp;&nbsp;{{previewData.createTime}}</li>
          <li>&nbsp;&nbsp;{{previewData.username}}</li>
          <li>&nbsp;&nbsp;<i class="el-icon-view"></i>&nbsp;{{previewData.visits}}</li>
        </ul>
      </div>
      <div class="bottom" v-html="previewData.articleBody" style="background: #f5f5f5;padding: 10px;border-top: 1px dashed #adadad;overflow: hidden;">
        {{previewData.articleBody}}
      </div>
    </el-dialog>
    <!-- 视频对话框 -->
    <el-dialog :visible.sync="videoDialogTableVisible" class="video-Visible">
   <!--阿里云播放器-->
      <AutoPlayer/>
    </el-dialog>
  </div>
</template>

<script>
import SearchBox from '@/components/SearchBox'
import DataBar from '@/components/DataBar'
import { list, listSearch, changeState, remove, add, update } from '@/api/hmmm/articles'

import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import {quillEditor} from 'vue-quill-editor'

import AutoPlayer from '@/components/AutoPlayer'
export default {
  created(){
    this.getlist({page:this.pageChange,pagesize:this.pagesizeChange})
  },
  components:{
    SearchBox,
    DataBar,
    quillEditor,
    AutoPlayer,
  },
  data () {
    return {
      search_title:{
       title1:'关键字',
       title2:'状态',
       buttonData:'新增技巧',
      },
      formInline: {
        title: '',
        use: ''
      },
      DataNum:0,//数据一共多少条
      tableData: [],
      videoURLShow: false,
      totalPages:10,
      pageChange:1,//页数变化
      pagesizeChange:10,//页面尺寸变化
      newSkillsdialogVisible: false,//新增
      articledialogVisible:false,//文章弹出对话框
      previewDialogVisible:false,//预览对话框
      previewData:{},//预览数据
      videoDialogTableVisible:false,//视频对话框
      enableMsg:{
        // {"id":18,"state":0}
      },//搜索框是否启用
      title:'',//文章弹出对话框标题
      formData:{
        articleBody:'',
        id:null,
        title:'',
        videoURL:null,
      },//文章弹出对话框绑定的数据
      rules:{
        title:[
      { required:true,message:'文章标题不能为空',trigger:'blur'},
      { required:true,pattern: /^(?!\s+).*(?<!\s)$/,  message: '文章标题首尾不能为空格', trigger: 'blur' }
      ],
        articleBody:[
      { required:true,message:'文章内容不能为空',trigger:'blur'},
      { required:true,pattern: /^(?!\s+).*(?<!\s)$/,  message: '文章内容首尾不能为空格', trigger: 'blur' }
      ]
      },
      editorOption:{
          placeholder: '',
          modules:{
              toolbar:[
                ['bold', 'italic', 'underline', 'strike'],
                [{ 'list': 'ordered'}, { 'list': 'bullet' }],
                ['blockquote', 'code-block','image','link','clean']
              ]
          }
      },
    }
  },
  methods: {
    //渲染函数
    async getlist(params,res){
      this.tableData=[]
      if(res){
      this.DataNum=res.counts
      this.totalPages=res.pages*this.pagesizeChange
      res.items.forEach((item) => {
        this.tableData.push(item)
        if(item.videoURL){item.videoURLShow=true}
        else{item.videoURLShow=false}
        });
      }else{
      const {data}=await list(params)
      console.log(data);
      this.DataNum=data.counts
      this.totalPages=data.pages*this.pagesizeChange
      data.items.forEach((item) => {
        this.tableData.push(item)
        if(item.videoURL){item.videoURLShow=true}
        else{item.videoURLShow=false}
        });
      }
    },
    //页数变化
    handleCurrentChange(value){
      this.pageChange=value
      this.getlist({page:this.pageChange,pagesize:this.pagesizeChange})
    },
    //页面尺寸发生变化
    handleSizeChange(value){
      this.pagesizeChange=value
      this.getlist({page:this.pageChange,pagesize:this.pagesizeChange})
    },
    //文章搜索
    async handleSearch(){
      console.log(this.formInline);
      try {
        if(this.formInline.use&&this.formInline.title){
        const {data} =await listSearch({keyword:this.formInline.title,state:this.formInline.use,page:1,pagesize:10})
        console.log(data);
        this.getlist('',data)
        }else if(this.formInline.title&&!this.formInline.use) {
        const {data} =await listSearch({keyword:this.formInline.title,page:1,pagesize:10})
        console.log(data);
        this.getlist('',data)
        }else if(!this.formInline.title&&this.formInline.use) {
        const {data} =await listSearch({state:this.formInline.use,page:1,pagesize:10})
        console.log(data);
        this.getlist('',data)
        }else if(!this.formInline.title&&!this.formInline.use) {
        this.getlist({page:1,pagesize:10})
        }
      } catch (error) {
        console.log(error);
      }
    },
    //清空
    formInlinefn(){
      this.formInline={}
    },
    //是否启用
    async enable(id,state){
      const state_a=state===0?1:0
      try {
      await changeState( {"id":id,"state":state_a})
      this.$message.success('修改成功')
      this.getlist({page:this.pageChange,pagesize:this.pagesizeChange})
      } catch (error) {
        this.$message.error('修改失败')
        console.log(error);
      }
    },
    //删除
    del(row){
      const newrow={}
      for(let key in row){
        if(key!=='videoURLShow'){
          newrow[key]=row[key]
        }
      }
        this.$confirm('此操作将永久删除该文章, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async() => {
          try {
          await remove(newrow)
          this.$message.success('删除成功!');
          this.getlist({page:this.pageChange,pagesize:this.pagesizeChange})
          } catch (error) {
          this.$message.error('删除失败!');
            console.log(error);
          }
        }).catch(() => {
          this.$message.info('已取消删除');
        });
    },
    //#点击_新增技巧_的确认按钮后...
    handleClose(Boolean) {
      this.title='新增文章'
      this.articledialogVisible=Boolean
      console.log(this.articledialogVisible);
    },
    //关闭弹出窗口_重置校验
    dialogclose(){
      this.$refs.formData.resetFields()
      this.formData={
        articleBody:'',
        id:null,
        title:'',
        videoURL:null,
      }
    },
    //确定按钮
    async confirm(){
      if(this.title==='新增文章'){
        try {
          const res = await add(this.formData)
          console.log(res);
          this.$message.success('操作成功')
          this.articledialogVisible = false
          this.getlist({page:this.pageChange,pagesize:this.pagesizeChange})
        } catch (error) {
          console.log(error);
        }
      }else{
        try {
          const res=await update(this.formData)
          console.log(res);
          this.$message.success('操作成功')
          this.articledialogVisible = false
          this.getlist({page:this.pageChange,pagesize:this.pagesizeChange})
        } catch (error) {
          console.log(error);
        }
      }
    },
    //修改
    async recompose(row){
      this.articledialogVisible = true
      this.title='修改文章'
      this.formData={
        articleBody:row.articleBody,
        id:row.id,
        title:row.title,
        videoURL:row.videoURL||null,
      }
    },
    //视频弹出
    videoShow(){
      this.videoDialogTableVisible=true
    },
    //预览
    preview(row){
      this.previewData.articleBody=row.articleBody//内容
      this.previewData.createTime=row.createTime.replace(/T/g,' ').replace(/.000Z/g,'')//创建时间
      this.previewData.title=row.title//标题
      this.previewData.username=row.username//用户
      this.previewData.visits=row.visits//浏览数
      this.previewDialogVisible = true
    },
},

}
</script>

<style scoped lang='scss'>
.interview-skills{
  margin: 0 auto;
  background-color: #fff;
  width: 99%;
  border: 1px solid #d8dce5;
  box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
  padding: 20px;
  padding-bottom: 80px;
  .hm-mm-list{
    margin-top: 20px;
  }
  ::v-deep th {
   background-color: #fafafa !important;
   border-bottom: 2px solid #e8e8e8 !important;
  }
  ::v-deep .el-dialog{
    border-radius: 6px;
  }
  ::v-deep .el-dialog__header{
    border-radius: 6px 6px 0 0;
  }
  ::v-deep .dialog-footer{
   .el-form-item__content{
    float: right;
    margin-right: 0px;
   }
  }
  ::v-deep .video-Visible{
    .el-dialog__header{
      background: #fff;
    }
    .el-dialog{
      border-radius: 3px;
    }
    .el-dialog__close{
      color: #909399;
    }
  }
}
</style>
